<!--
 * @FilePath     : /study_code/vue2.x/3.2-7.html
 * @Description  : 第2参数，directives 配置项
 * @Date         : 2025-05-03 10:27:34
 * @Author       : Fang YingGui
 * @LastEditors  : fangyinggui 18715384437@163.com
 * @LastEditTime : 2025-05-03 10:27:38
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>dname</title>
  </head>

  <body>
    <div id="app">
      <my-component></my-component>
      <!--  -->
    </div>

    <script src="/vue/dist/vue.min.js"></script>
    <script src="./common.js"></script>
    <script>
      Vue.directive('focus', {
        // 当被绑定的元素插入到 DOM 中时……
        inserted: function (el, binding, vnode, oldVnode) {
          // 聚焦元素
          el.focus()
          console.log('指令的一些参数', el, binding, vnode, oldVnode)
        },
      })

      const myComponent = {
        data: function () {
          return {
            value: 'input 初始值',
            isActive: true,
            isShow: false,
            altMsg: '加载失败时的提示',
          }
        },
        render: function (createElement) {
          return createElement('input', {
            attrs: {
              value: this.value,
            },
            /**
             * @brief: 指令钩子配置 (link: 自定义指令 —— 钩子函数参数)
             * @return {*}
             */
            // 自定义指令。注意，你无法对 `binding` 中的 `oldValue`
            // 赋值，因为 Vue 已经自动为你进行了同步。
            directives: [
              {
                name: 'focus', // 指令名（不包括 v-）
                value: '2', // 指令绑定的值（例如：v-my-directive="1 + 1"中，绑定值为2）
                // expression: '1 + 1', // 字符串形式的指令表达式 （例如： v-my-directive="1 + 1", 表达式为 "1 + 1"）
                arg: 'foo', // 传给指令的参数 （例如： v-my-directive:foo, 参数为 "foo"）
                modifiers: {
                  // 一个包含修饰符的对象。例如：`v-my-directive.foo.bar` 中，修饰符对象为 `{ foo: true, bar: true }`
                  bar: true,
                },
              },
            ],
          })
        },
      }

      var app = new Vue({
        el: '#app',
        data: function () {
          return {}
        },
        components: {
          myComponent,
        },
      })
    </script>
  </body>
</html>
